/* INCLUDE FONTS*/
@font-face{
    src: url('fonts/Ubuntu-Regular.ttf');
    font-family: 'Ubuntu';
}

@font-face{
    src: url('fonts/Ubuntu-Bold.ttf');
    font-family: 'Ubuntu-Bold';
}

@font-face{
    src: url('fonts/Ubuntu-Italic.ttf');
    font-family: 'Ubuntu-Italic';
}

@font-face{
    src: url('fonts/Ubuntu-BoldItalic.ttf');
    font-family: 'Ubuntu-BoldItalic';
}

/* DEFINE COLORS */
@dark: #1F253D;
@smoke: #293E61;
@fog: #335685;
@cloud: #3D6FA8;
@sky: #4787CC;
@neutral: #88A0BA;
@grey:#787878;
@black: #000;
@white: #fff;

/* DEFINE FONTS */
@regular: 'Ubuntu';
@italic: 'Ubuntu-Italic';
@bold: 'Ubuntu-Bold';
@bold-italic: 'Ubuntu-BoldItalic';

/* OTHER DEFINES*/

.radius(){
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}
.radius-bottom(){
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
}

.radius-top(){
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
}

@cell: 77px;

.button{
        border: none;
        .radius;
        background: @neutral;
        color: @white;
        cursor: pointer;
        padding: .5ex 2ex;
        margin: 0;
        text-decoration: none;        
    }

/* STYLESHEET */
body{
    background: @dark;
    color: @white;
    font-family: @regular;
    font-size: 14px;
    margin: 0;
    text-align: center;
}

b, strong{
    font-family: @bold;
}
.clear{
    clear: both;
}

i{
    font-family: @italic;
}

b>i, i>b, strong>i, i>strong{
    font-family: @bold-italic;
}

a{
    color: @neutral;
    text-decoration: none;
}
a:hover{
    color: @white;
    text-decoration: underline;
}
a>img{
    border: none;
}

.preloader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: @dark - #111;
    z-index: 1001;
    text-align: center;
    padding-top: 30%;
}

.outwrapper{
    display: inline-block;
    position: relative;
    width: 925px;
    text-align: left;
    margin: 10px 0;
}

.footer{
    margin: 30px 0;
}

.message(@bg, @icon){ 
    position: relative;
    font-size: 16px;
    color: @bg - #666;
    border: 1px solid @bg - #666;
    padding: 8px 40px;
    text-align: left;
    .radius;
    overflow: hidden;
    margin: 5px 0;
    background: @icon no-repeat;
    background-position: 0 8px; 
    background-color: @bg;
    box-shadow: 0 3px 3px @bg / 4;

    .msg-close-btn{
        position: absolute;
        right: 6px;
        top :6px;
        width: 24px;
        height: 24px;
        text-align: center;
        color: #fff;        
        background: url() center center no-repeat;
        cursor: pointer;
    }
    .msg-close-btn:hover{
        border: 1px solid #fff;
        margin: -1px;
        .radius;
    }
}
.message.error{
    @bg-color: #ff6666;
    @icon: url("");    
    .message(@bg-color, @icon);
}
.message.ok{
    @bg-color: #00aa66;
    @icon: url("");
    .message(@bg-color, @icon);
}
.message.notice{
    @bg-color: #99ccff;
    @icon: url('');
    .message(@bg-color, @icon);
}
.message.warning{
    @bg-color: #ffcc66;
    @icon: url("");
    .message(@bg-color, @icon);
}
.message.system{    
    @bg-color: #88A0BA;
    @icon: url("");
    .message(@bg-color, @icon);
}

/* MAINMENU */
div.mainmenu{
    display: table;
    width: 100%;
    background: @smoke;
    .radius;
    overflow: hidden;
    ul{
        list-style: none outside none;
        display: table-row;
        position: relative;
        li{
            display: table-cell;            
            vertical-align: top;
            text-align: center;
            a{
                display: block;
                padding: 10px 10px 5px 10px;
                border-bottom: 5px solid @sky;
                color: @white;
                text-decoration: none;                
                span.count-sup{
                    position: relative;
                    top: -1ex;
                    font-size: 0.8em;
                    margin: 0.5ex;
                }
            }
            a.selected,
            a:hover{
                background: @fog;
                border-bottom: 5px solid @white;
            }
            
            ul{
                position: absolute;
                display: none;
                z-index: 1;
                background: @fog;
                left: 4px;
                right: 4px;
                .radius-bottom;
                text-align: left;
                padding: 0;
                border: 1px solid @dark;
                border-top: 1px solid @white;
                box-shadow: 0 3px 5px @fog - #999;
                li{
                    border: 1px solidred;
                    display: inline-block;
                    width: 30%;
                    margin: 5px 10px;
                    a{
                        border: none;
                        background: none;
                        padding: 10px;
                        border-left: 1px solid @white;                        
                    }
                    a.selected,
                    a:hover{                        
                        background: @cloud;
                        border-bottom: none;
                    }
                }
            }            
        }
        li:hover ul{
            display:block;
        }
    }
}

/* CONTENT TABLE */
.content-table{
    display: table;
    width: 100%;
    .content-row{
        display: table-row;
        .content-cell{
            display: inline-block;
            vertical-align: top;
            width: @cell;
            .container{
                margin: 0 4px 8px 4px;
                padding: 4px;
                background: @smoke;
                .radius;
                .container-head{
                    position: relative;
                    margin: -4px;
                    margin-bottom: 4px;
                    padding: 4px 40px 4px 4px;
                    background: @sky;
                    .radius-top;
                    overflow: hidden;
                    .container-head-corner-button{
                        position: absolute;
                        top: 0;
                        right: 0;
                        border: none;
                        border-radius: 0 4px 0 0;
                        margin: 0;
                        height: 100%;
                        width: 40px;
                        background-color: @neutral;
                        color: @white;
                        text-decoration: none;
                        text-align: center;
                        cursor: pointer;
                        padding: 0.5ex 0;
                    }
                    .container-head-corner-button:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
        .x2{
            width: @cell * 2;
        }
        .x3{
            width: @cell * 3;
        }
        .x4{
            width: @cell * 4;
        }
        .x5{
            width: @cell * 5;
        }
        .x6{
            width: @cell * 6;
        }
        .x7{
            width: @cell * 7;
        }
        .x8{
            width: @cell * 8;
        }
        .x9{
            width: @cell * 9;
        }
        .x10{
            width: @cell * 10;
        }
        .x11{
            width: @cell * 11;
        }
        .full{
            width: @cell * 12;
        }
    }
}

/* FORMS */
.formfield{
    position: relative;
    margin-top: 4px;
    label{
        width: 25%;
    }
    input[type="text"],input[type="password"], select{
        position: absolute;
        top: 0;
        right: 0;
        width: 74%;
        border: none;
        margin: 0;
    }     
    
    input[type="submit"]{
        .button;        
        float: right;
    }
}

.separator{
    .radius;
    background: @sky;
    margin: 1ex 0;
    padding: 0.5ex;
}